<template>
  <div style="margin-top: 30px;">

    <!--员工列表-->
    <el-row>
      <el-col :span="24" :offset="0" style="margin-top:30px;">

        <el-row :gutter="0" style="border: 1px solid white">
          <el-col :span="4" :offset="0" style="">
            <span style="font-size: 15px;margin-right: 5px;">所属科室</span>
            <el-select v-model="typeValue" placeholder="全部" style="width: 150px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="7" :offset="1" style="">
            <el-input placeholder="员工姓名" v-model="searchValue" class="">
              <el-button slot="append" icon="el-icon-search" @click="querySubmit"></el-button>
            </el-input>
          </el-col>

          <el-col :span="2" :offset="10" style="">
            <el-button type="success" style="float: right" @click="insert">新增</el-button>
          </el-col>
        </el-row>


        <el-row :gutter="0" style="margin-top:20px;border: 1px solid white">
          <el-col :span="24" :offset="0" >
            <el-table stripe :data="tableData" :header-cell-style="{lineHeight:'20px'}" style="width: 100%"><!--height="840"-->
              <el-table-column type="index" width="50" label="序号"></el-table-column>
              <el-table-column prop="empId" label="工号"></el-table-column>
              <el-table-column prop="name" label="员工姓名"></el-table-column>
              <el-table-column prop="sex" label="员工性别"></el-table-column>
              <el-table-column prop="age" label="员工年龄"></el-table-column>
              <el-table-column prop="phone" label="手机号码"></el-table-column>
              <el-table-column prop="department" label="所属科室"></el-table-column>
              <el-table-column prop="role" label="角色"></el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column prop="createPerson" label="创建人员"></el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button type="text" size="small"@click="update(scope.row.empId)">编辑</el-button>
                  <el-button type="text" size="small" @click="handleClick(scope.row.empId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  import axios from 'axios';
    export default {
      name: "employee1",
      data() {

        return {

          tableData:[],
          input1:'',
          searchValue: '',
          options: [{
            value: '选项1',
            label: '全部'
          }, {
            value: '选项2',
            label: '全科'
          }, {
            value: '选项3',
            label: '内科'
          }, {
            value: '选项4',
            label: '儿科'
          }],
        }
      },
      methods: {

        update:function(empId){
          //alert(empId);

          this.$router.push({name:"employeeInsert1Name",params:{id:empId}})

        },
        findAll:function(){
          axios.get("api/employee/findAll").then(res=>{
            this.tableData=res.data;

          })
        },
        handleClick:function(empId) {
          //alert(empId);

          axios.post("api/employee/delete",{empId:empId}).then(res=>{
            //alert(res.data);
            if(res.data=="success"){
              this.findAll();
            }
          })
        },
        querySubmit() {
          console.log('submit!');
        },
        insert:function () {
          this.$router.push("/employeeInsert1")
        }
      },
      mounted(){
        this.findAll();
      }
    }
</script>

<style scoped>

</style>
